<template>
    <div class="shop-preview">
        <div class="tip-line">
            <cell-tip tip="编辑修改后请点击下方底部按钮进行保存操作，否则系统不会保存。" />
        </div>
        <div class="preview-head">
            <div class="preview-head__text">搜索</div>
        </div>
        <!-- 放置首页样式 -->
        <div class="preview-body">
            <div class="body-one flexs">
                <div class="body-one__left">
                    <el-input placeholder="搜索商品" readonly :prefix-icon="Search" />
                </div>
                <p class="body-one__right">搜索</p>
            </div>
            <div class="words-box">
                <p class="words-h3">热门搜索</p>
                <div class="words-list">
                    <template v-if="betterHot.length > 0">
                        <template v-for="item in betterHot" :key="item.title">
                            <div class="words-item" v-if="item.title">
                                <el-image :src="item.icon" fit="cover" />
                                <span class="is-hot">{{ item.title }}</span>
                            </div>
                        </template>
                    </template>
                    <template v-if="ordinaryHot.length > 0">
                        <template v-for="item in ordinaryHot" :key="item.title">
                            <div class="words-item" v-if="item.title">
                                <el-image :src="item.icon" fit="cover" v-if="item.icon" />
                                <span>{{ item.title }}</span>
                            </div>
                        </template>
                    </template>
                </div>
            </div>
        </div>
        <div class="preview-foot">
            <div class="copyright">
                <div class="ft-copyright">
                    <img :src="logo_grey" alt="花数云" />
                    <p>花数云提供技术支持</p>
                </div>
            </div>
        </div>
    </div>
    <div class="preview-edit">
        <div class="preview-edit__head">
            <div class="preview-edit__head-one flexs">
                <p>搜索设置</p>
            </div>
            <div class="preview-edit__head-dec">
                <p>配置跳转链接需小程序 v2.87 以上版本支持</p>
                <p>热词将全部在搜索框内展示，并以标签样式显示于搜索页。</p>
            </div>
        </div>
        <p class="preview-edit__title">搜索热词</p>
        <div class="hot-box">
            <!-- 精选热词  -->
            <div class="hot-item">
                <p class="hot-item__title">精选热词</p>
                <p class="hot-item__subtitle">最多配置 3 个精选热词，可拖动排序</p>
                <!-- 热词数组 -->
                <div class="better-list" v-if="betterHot.length > 0">
                    <draggable v-model="betterHot" item-key="item" animation="200">
                        <template #item="{ element, index }">
                            <div class="better-item">
                                <div class="better-item__one flexs">
                                    <p>配置跳转链接</p>
                                    <el-switch v-model="element.switch_url" />
                                </div>
                                <div class="better-body flexs">
                                    <div class="better-body__left" @click.stop="clickImg(element, index)">
                                        <el-image :src="element.icon" fit="cover" />
                                        <span class="better-body__tip">更换图片</span>
                                    </div>
                                    <div class="better-body__right">
                                        <el-input v-model="element.title" maxlength="8" clearable placeholder="最多8个字" />
                                        <div class="better-link" v-if="element.switch_url">
                                            <p class="better-link__text" @click.stop="clickLink(element)" v-if="element.urlText == ''">
                                                选择链接页面<el-icon><ArrowDown /></el-icon>
                                            </p>
                                            <div class="better-link__active flexs" v-else>
                                                <div class="better-link__active-info flexs">
                                                    <p class="better-link__active-name line-one">{{ element.urlText }}</p>
                                                    <el-icon @click.stop="clearLink(element)"><CloseBold /></el-icon>
                                                </div>
                                                <p class="better-link__text" @click.stop="clickLink(element)">
                                                    修改<el-icon><ArrowDown /></el-icon>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="item-delete" @click="deleteHot(index)">
                                    <el-icon color="#bbb" size="20px"><CircleCloseFilled /></el-icon>
                                </div>
                            </div>
                        </template>
                    </draggable>
                </div>
                <div class="hot-item__add flexs-center" @click.stop="addBetter" v-if="betterHot.length < 3">
                    <el-icon color="#4B93FA"><Plus /></el-icon>添加精选热词（{{ betterHot.length }}/3）
                </div>
            </div>
            <!-- 普通热词  -->
            <div class="hot-item">
                <p class="hot-item__title">普通热词</p>
                <p class="hot-item__subtitle">最多配置 6 个精选热词，可拖动排序</p>
                <!-- 热词数组 -->
                <div class="better-list" v-if="ordinaryHot.length > 0">
                    <draggable v-model="ordinaryHot" item-key="item" animation="200">
                        <template #item="{ element, index }">
                            <div class="better-item">
                                <div class="better-item__one flexs">
                                    <p>配置跳转链接</p>
                                    <el-switch v-model="element.switch_url" size="small" />
                                </div>
                                <div class="better-body flexs">
                                    <div class="better-body__left" @click.stop="clickImg(element, index)">
                                        <template v-if="element.icon">
                                            <el-image :src="element.icon" fit="cover" v-if="element.icon" />
                                            <span class="better-body__tip">更换图片</span>
                                        </template>
                                        <div class="icon-none" v-else>
                                            <el-icon color="#4B93FA" size="20px"><Plus /></el-icon>
                                            <p class="icon-none__text">添加图片</p>
                                        </div>
                                    </div>
                                    <div class="better-body__right">
                                        <el-input v-model="element.title" maxlength="8" clearable placeholder="最多8个字" />
                                        <div class="better-link" v-if="element.switch_url">
                                            <p class="better-link__text" @click.stop="clickLink(element)" v-if="element.urlText == ''">
                                                选择链接页面<el-icon><ArrowDown /></el-icon>
                                            </p>
                                            <div class="better-link__active flexs" v-else>
                                                <div class="better-link__active-info flexs">
                                                    <p class="better-link__active-name line-one">{{ element.urlText }}</p>
                                                    <el-icon @click.stop="clearLink(element)"><CloseBold /></el-icon>
                                                </div>
                                                <p class="better-link__text" @click.stop="clickLink(element)">
                                                    修改<el-icon><ArrowDown /></el-icon>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="item-delete" @click="deleteOrdinary(index)">
                                    <el-icon color="#bbb" size="20px"><CircleCloseFilled /></el-icon>
                                </div>
                            </div>
                        </template>
                    </draggable>
                </div>
                <div class="hot-item__add flexs-center" @click.stop="addOrdinary" v-if="ordinaryHot.length < 6">
                    <el-icon color="#4B93FA"><Plus /></el-icon>添加精选热词（{{ ordinaryHot.length }}/6）
                </div>
            </div>
        </div>
    </div>

    <!-- 选择页面 -->
    <PageDialog :show="showPage" @change="page_change" @close="showPage = false"></PageDialog>

    <!-- 图片库 -->
    <picture-library :show="showImg" :select_multiple="false" @close="showImg = false" @select="selectImg"> </picture-library>

    <div class="foot-btn flexs-center">
        <el-button type="primary" size="large" :loading="btn_loading" @click="handleConfirm">保存</el-button>
    </div>
</template>

<script setup>
import { getCurrentInstance, ref, onMounted } from "vue"
import { Search, Plus, CircleCloseFilled, ArrowDown, CloseBold } from "@element-plus/icons-vue"
import PictureLibrary from "@components/PictureLibrary.vue"
import draggable from "vuedraggable"
import PageDialog from "@components/PageDialog.vue"
import CellTip from "@components/cell-tip.vue"
import logo_grey from "@images/logo_grey.png"

const { proxy } = getCurrentInstance()

onMounted(() => {
    getConfigs()
})

function getConfigs() {
    proxy.$axios.get('decorate/search').then(res => {
        if (res.data.code == 0) {
            let result = res.data.data.style
            if(result.betterHot && result.ordinaryHot){
                betterHot.value = result.betterHot
                ordinaryHot.value = result.ordinaryHot
            }
        } else {
            proxy.$message({message:res.data.msg,type:"error"})
        }
    }).catch(err => { })
}

// 保存
const btn_loading = ref(false)
const handleConfirm = () => {
    for (let item of betterHot.value) {
        if (!item.title) {
            proxy.$message({ message: "请输入精选热词", type: "warning" })
            return
        }
    }
    for (let item of ordinaryHot.value) {
        if (!item.title) {
            proxy.$message({ message: "请输入普通热词", type: "warning" })
            return
        }
    }
    let objs = {
        betterHot: betterHot.value,
        ordinaryHot: ordinaryHot.value
    }
    btn_loading.value = true
    proxy.$axios.post('decorate/search', {
        style: JSON.stringify(objs)
    }).then(res => {
        btn_loading.value = false
        if (res.data.code == 0) {
            proxy.$message({ message: "保存成功！", type: "success" })
        } else {
            proxy.$message({message:res.data.msg,type:"error"})
        }
    }).catch(err => {
        btn_loading.value = false
    })
}

/**
 * 精选热词
 * @param {Array} betterHot 精选数组
 * @param {Function} addBetter 点击添加热词
 */
const betterHot = ref([])
const addBetter = () => {
    betterHot.value.push({
        switch_url: false,
        icon: "https://cdn.huashushop.com/tenant_ad0234829205b9033196ba818f7a872b/album/202208/20220813_c31aa352e2fb17719d4176bb25662573.png",
        title: "",
        url: "",
        urlText: "",
        type: "",
        page_id: "",
    })
}
const deleteHot = (index) => {
    betterHot.value.splice(index, 1)
}

/**
 * 普通热词
 * @param {Array} ordinaryHot 普通数组
 * @param {Function} addOrdinary 点击添加热词
 */
const ordinaryHot = ref([])
const addOrdinary = () => {
    ordinaryHot.value.push({
        switch_url: false,
        icon: "",
        title: "",
        url: "",
        urlText: "",
        type: "",
        page_id: "",
    })
}
const deleteOrdinary = (index) => {
    ordinaryHot.value.splice(index, 1)
}

// 选择页面链接
const showPage = ref(false)
const linkItem = ref({})
const page_change = (link) => {
    linkItem.value.urlText = link.urlText
    linkItem.value.url = link.url
    linkItem.value.page_id = link.page_id
    linkItem.value.type = link.type
    showPage.value = false
}
const clickLink = (item, index) => {
    linkItem.value = item
    showPage.value = true
}
const clearLink = (item) => {
    item.urlText = ""
    item.url = ""
    item.type = ""
    item.page_id = ""
}

/**
 * 添加/更换图片
 * @param {Boolean} showImg 显示图片库
 * @param {Number} arr_index 数组索引
 * @param {Object} arr_item 数据项
 * @param {Function} clickImg 点击更换图片，
 * @param {Function} selectImg 选择图片
 */
const showImg = ref(false)
const arr_index = ref("")
const arr_item = ref({})
const clickImg = (item, index) => {
    arr_item.value = item
    arr_index.value = index
    showImg.value = true
}
const selectImg = (val) => {
    showImg.value = false
    arr_item.value.icon = proxy.imgUrl + val[0].photo
}
</script>
<script>
export default {
    name: "DecoHotTerms",
}
</script>

<style lang="less" scoped>
.tip-line {
    flex: none;
    width: 100%;
}
.el-dialog :deep(.el-dialog__body) {
    padding: 20px 20px !important;
}
.words-box {
    padding: @padding-xs @padding-md;
    background-color: #fff;
    .words-h3 {
        margin-bottom: @margin-xs;
    }
    .words-list {
        display: flex;
        flex-flow: row wrap;
        .words-item {
            border-radius: 20px;
            border: 1px solid @gray-3;
            font-size: @font-size-sm;
            display: flex;
            background-color: #fff;
            padding: 5px 14px;
            margin-bottom: @margin-xs;
            margin-right: @margin-xs;
            min-height: @line-height-sm;
            .el-image {
                width: 16px;
                height: 16px;
                margin-right: @margin-base;
                flex: none;
            }
            span {
                line-height: @line-height-sm;
            }
            .is-hot {
                color: @red;
                flex: 1;
            }
        }
    }
}
.table-mb {
    .link-p {
        cursor: pointer;
        font-size: @font-size-md;
        color: @gray-7;
        &:hover {
            color: @themes;
        }
    }
    .link-active {
        color: @themes;
        font-weight: bold;
    }
}

.hot-box {
    padding: 0px @padding-md @padding-xl;
    .hot-item {
        padding: @padding-sm;
        border-bottom: 1px solid @gray-3;
        background-color: @gray-1;
        &:last-child {
            border: 0;
        }
        .hot-item__title {
            font-size: @font-size-md;
            color: @gray-8;
            margin-bottom: @margin-xs;
        }
        .hot-item__subtitle {
            font-size: @font-size-md;
            color: @gray-6;
            margin-bottom: @margin-sm;
        }
    }
    .better-list {
        margin-top: @margin-sm;
        border-radius: @radius-xs;
        &:first-child {
            margin-top: 0;
        }
        .better-item {
            box-shadow: 0 0px 4px 0 rgba(0, 0, 0, 0.1);
            padding: @padding-xs @padding-md;
            margin-bottom: @margin-sm;
            position: relative;
            background-color: #fff;
            .better-body {
                align-items: flex-start;
                .better-body__left {
                    flex: none;
                    margin-right: 10px;
                    position: relative;
                    width: 60px;
                    height: 60px;
                    text-align: center;
                    background-color: @gray-2;
                    border: 1px solid #e5e5e5;
                    cursor: pointer;
                    overflow: hidden;
                    .icon-none {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        width: 60px;
                        height: 60px;
                        .icon-none__text {
                            color: @themes;
                            font-size: @font-size-sm;
                            margin-top: @margin-base;
                        }
                    }
                    .better-body__tip {
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        width: 100%;
                        height: 20px;
                        line-height: 20px;
                        font-size: @font-size-sm;
                        color: #fff;
                        background: rgba(0, 0, 0, 0.5);
                        cursor: pointer;
                        text-align: center;
                    }
                }
                .better-body__right {
                    flex: 1;
                    overflow: hidden;
                    .better-link {
                        margin-top: 6px;
                        color: @themes;
                        font-size: @font-size-sm;
                        overflow: hidden;
                        width: 100%;
                        .better-link__text {
                            line-height: @line-height-md;
                            display: flex;
                            align-items: center;
                            cursor: pointer;
                            .el-icon {
                                margin-left: @margin-base;
                            }
                        }
                        .better-link__active {
                            width: 100%;
                            overflow: hidden;
                            .better-link__active-info {
                                flex: 1;
                                border: 1px solid @themes;
                                border-radius: @radius-sm;
                                background-color: #e0edff;
                                padding: 2px 4px;
                                margin-right: @margin-sm;
                                overflow: hidden;
                                .better-link__active-name {
                                    flex: 1;
                                    margin-right: @margin-xs;
                                }
                                .el-icon {
                                    flex: none;
                                    cursor: pointer;
                                }
                            }
                        }
                    }
                }
            }
            .better-item__one {
                font-size: @font-size-md;
                color: @gray-6;
                margin-bottom: @margin-sm;
            }
            .item-delete {
                position: absolute;
                cursor: pointer;
                top: -8px;
                right: -8px;
                z-index: 4;
            }
        }
    }
    .hot-item__add {
        cursor: pointer;
        margin-top: @margin-sm;
        border-radius: @radius-xs;
        border: 1px solid @themes;
        background-color: #fff;
        color: @themes;
        font-size: @font-size-md;
        padding: @padding-xs @padding-md;
    }
}
.body-one {
    width: 100%;
    background-color: #fff;
    padding: @padding-md 0 @padding-md @padding-md;
    .body-one__left {
        flex: 1;
        :deep(.el-input__wrapper) {
            border-radius: 30px;
            height: 34px;
            background-color: @gray-1;
            border: 0px !important;
            box-shadow: 0 0 0 0;
        }
    }
    .body-one__right {
        flex: none;
        width: 66px;
        font-size: @font-size-lg;
        color: @gray-8;
        text-align: center;
    }
}
.shop-preview {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background-color: #fff;
    margin-right: @margin-sm;
    position: relative;
    flex-direction: column;
    height: calc(100vh - 120px);
    padding: @padding-mdl;
}

.preview-head {
    // background: url("../../../assets/images/head_bg.png") no-repeat center;
    background: url("https://cdn.huashushop.com/tenant_593be52a46f869eea8b31d146d21de7a/album/202304/20230413_65a2bd95cd8296208c97245fb2d2e0a4.png") no-repeat center;
    background-size: cover;
    width: 375px;
    height: 64px;
    box-shadow: 0 2px 8px 0 rgb(0 0 0 / 10%);
    position: relative;

    .preview-head__text {
        width: 180px;
        margin: 0 auto;
        text-align: center;
        padding-top: 31px;
        font-size: 16px;
        font-weight: bold;
    }
}

.preview-body {
    position: relative;
    width: 375px;
    overflow: visible;
    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 10%);
    background-color: #f9f9f9;
    min-height: 513px;
}

.preview-foot {
    min-height: 1px;
    text-align: center;
    line-height: 16px;
    background-color: #f8f8f8;
    width: 375px;
    box-shadow: 0 2px 8px 0 rgb(0 0 0 / 10%);
    overflow: hidden;

    .copyright {
        background-color: #fff;
        position: relative;
        color: #999;
        text-align: center;
    }

    .ft-copyright {
        padding: 20px 16px 10px;
        text-align: center;
        cursor: pointer;
    }

    .ft-copyright img {
        width: 30px;
    }

    .ft-copyright p {
        font-size: 12px;
        color: #bfbfc3;
        padding: 6px 0px 10px;
    }
}

.preview-edit {
    flex: none;
    width: 376px;
    height: calc(100vh - 120px);
    background-color: #fff;
    overflow-y: auto;
    /*滚动条整体样式*/
    &::-webkit-scrollbar {
        /*高宽分别对应横竖滚动条的尺寸*/
        width: 6px;
        height: 1px;
    }
    /*滚动条里面小方块*/
    &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background: @gray-4;
    }
    /*滚动条里面轨道*/
    &::-webkit-scrollbar-track {
        border-radius: 10px;
        background: #f1f1f1;
    }
    .preview-edit__head {
        border-bottom: 1px solid #f2f4f6;
        padding: @padding-lg @padding-md;

        .preview-edit__head-one {
            font-size: 18px;
            font-weight: bold;
            color: @gray-8;
        }

        .preview-edit__head-dec {
            font-size: @font-size-md;
            color: @gray-6;
            margin-top: @margin-sm;
            p {
                margin-top: 5px;
            }
        }
    }
    .preview-edit__title {
        font-size: @font-size-md;
        color: @gray-8;
        padding: @padding-sm @padding-md;
    }
}
</style>
